import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom';
import '../../style/kuangjia.css';
import '../../style/main.css';
import RowSongList from '../songLists/RowsongList';
import RowplayLists from '../songLists/RowplayLists';
import xingkong from '../../img/xingkong.jpg'
import ensong from '../../img/enSong.webp'
import oldsong from '../../img/oldsong.jfif'
import quer from '../..//img/quer.webp'

const Recommend = () => {
  const [musicdata, setMusicData] = useState([])
  const [songdata, setSongdata] = useState([])
  const [hotdata, setHotdata] = useState([])
  const [recommenddata, seRecommenddata] = useState([])

  const [loading, setLoading] = useState(true)

  useEffect(() => {
    setLoading(true)
    fetch('http://localhost:3000/personalized?limit=10')
      .then((Response) => Response.json())
      .then((data) => {
        setMusicData(data.result)
        setLoading(false)
      })
      .catch((error) => {
        console.error('Error fetching music data:', error)
        setLoading(false)
      });
  }, [])

  useEffect(() => {
    setLoading(true)
    fetch('http://localhost:3000/recommend/songs')
      .then((Response) => Response.json())
      .then((data) => {
        setSongdata(data.data.dailySongs)
        setLoading(false)
      })
      .catch((error) => {
        console.error('Error fetching music data:', error)
        setLoading(false)
      });
  }, [])

  useEffect(() => {
    setLoading(true)
    fetch('http://localhost:3000/top/playlist/highquality')
      .then((Response) => Response.json())
      .then((data) => {
        setHotdata(data.playlists)
        setLoading(false)
      })
      .catch((error) => {
        console.error('Error fetching hotdata data:', error)
        setLoading(false)
      });
  }, [])

  useEffect(() => {
    fetch('http://localhost:3000/top/playlist?limit=10&order=old')
      .then((Response) => Response.json())
      .then((data) => {
        seRecommenddata(data.playlists)
        setLoading(false)
      })
      .catch((error) => {
        console.error('Error fetching hotdata data:', error)
        setLoading(false)
      });
  }, [])
  return (
    <div className="recommend">
      {loading ? (
        <div className="loadingPage">
          <div className="loadcomponents">
            <div className='loader2'></div>
            <div className='loader1'></div>
          </div>
        </div>
      ) : (
        <>
          <p>Hi <span id="username">Denselin</span> 今日为你推荐</p>
          <div className="main_recommend">
            <div className="block">
              <Link to="dailysongs">
                <div className="card1">
                  <div className="card1_float">
                    <p>猜猜你 de 喜欢</p>
                    <p><span>或许</span>这里都有</p>
                    <div className="tubiao"><i className="ri-play-fill"></i></div>
                  </div>
                  <img src={xingkong} alt="" />
                  <p>每日推荐</p>
                </div>
              </Link>
            </div>
            <div className="block">
              <Link to={`9381254472`}>
                <div className="card">
                  <img src={ensong} alt="" />
                  <p>百万收藏</p>
                </div>
              </Link>
            </div>
            <div className="block">
              <Link to={`3779629`}>
                <div className="card">
                  <img src={oldsong} alt="" />
                  <p>新歌推荐</p>
                </div>
              </Link>
            </div>
            <div className="block">
              <Link to={`6686195784`}>
                <div className="card">
                  <img src={quer} alt="" />
                  <p>民谣日推</p>
                </div>
              </Link>
            </div>
            <div className="block">
              <Link to={`2712853756`}>
                <div className="card">
                  <img src={ensong} alt="" />
                  <p>欧美流行日推</p>
                </div>
              </Link>
            </div>
          </div>

          <p className="titl2">你的私人推荐歌单</p>
          <div className="playlist_recommend">
            {musicdata.map((item, index) => (
              <div className="block" key={index}>
                <Link to={`${item.id}`}>
                  <div className="card">
                    <img src={item.picUrl} alt={item.name} />
                    <p>{item.name}</p>
                  </div>
                </Link>
              </div>
            ))}
          </div>

          <p className="titl2">大家都在听</p>
          <RowSongList songs={songdata} />
          <p className="titl2">热点歌单 | 听点不一样的</p>
          <RowplayLists playlists={recommenddata} />
          <p className="titl2">值得红心的宝藏歌曲</p>
          <RowSongList songs={songdata} />
          <p className="titl2">歌单遨游指南</p>
          <RowplayLists playlists={hotdata} />
        </>
      )

      }
    </div>
  );
};

export default Recommend;


